<template>
  <div class="toper">
    <div class="titleBox">
      <div class="title">
        我的收藏
      </div>
    </div>
    <div class="msgType">
      <div class="menuList">
        <div
          v-for="item in typeList"
          :key="item.id"
          class="menu"
          :class="{ active: activeIndex == item.id }"
          @click="checkType(item)"
        >
          {{ item.title }}
        </div>
      </div>
      <div
        v-if="activeIndex !== 3"
        class="search"
      >
        <input
          v-model="SearchInput"
          type="text"
          :placeholder="placeholder"
          class="input"
        >
        <button
          class="searchBtn"
          @click="Search(SearchInput)"
        >
          搜索
        </button>
      </div>
    </div>
    <!-- 关注商品Top -->
    <div v-if="activeIndex === 1">
      <div class="screening_box">
        <div class="screening_l">
          <div class="screening_l_item">
            <div class="screening_title">
              分类筛选
            </div>
            <div class="screening_itme_box">
              <div 
                class="screening_itme"
                :class="classListActive === ''?'activeclass':''"
                @click="ClassAll"
              >
                全部
              </div>
              <div
                v-for="(item,index) in classList"
                :key="index"
                class="screening_itme"
                :class="classListActive === index?'activeclass':''"
                @click="ClassTabClick(item[0],index)"
              >
                {{ item[0].cName }}({{ item[1] }})
              </div>
            </div>
          </div>
          <div class="screening_l_item">
            <div class="screening_title">
              标签筛选
            </div>
            <div class="screening_itme_box">
              <div 
                class="screening_itme"
                :class="tagListActive === ''?'activeclass':''"
                @click="TagAll"
              >
                全部
              </div>
              <div
                v-for="(item,index) in tagList"
                :key="index"
                class="screening_itme"
                :class="tagListActive === index?'activeclass':''"
                @click="TagTabClisck(item, index)"
              >
                {{ item.tag_name }}
              </div>
            </div>
          </div>
        </div>

        <div
          v-if="opreateStatus === false"
          class="screening_r"
        >
          <button
            
            class="OperationBtn"
            @click="Operation"
          >
            批量操作
          </button>
        </div>

        <div
          v-if="opreateStatus === true"
          class="screening_r"
        >
          <div>
            <el-checkbox 
              v-model="slectedAll" 
              @change="selectAll"
            > 
              全选
            </el-checkbox>
          </div>
          <div @click="AllAddCar">
            <img
              src="../../assets/img/cart_seleted.png"
              alt=""
            >
            加入购物车
          </div>
          <div @click="AllCancelCollection">
            <img
              src="../../assets/img/un_focus.png"
              alt=""
            >
            取消收藏
          </div>
          <button
            class="OperationBtn"
            @click="Operation"
          >
            完成
          </button>
        </div>
      </div>
    </div>
    <!-- 关注商品Top -->

    <!-- 关注地铺 -->
    <div v-if="activeIndex === 2">
      <div class="screening_box">
        <div class="screening_l" />

        <div
          v-if="opreateStatus === false"
          class="screening_r"
        >
          <button
            
            class="OperationBtn"
            @click="Operation"
          >
            批量操作
          </button>
        </div>

        <div
          v-if="opreateStatus === true"
          class="screening_r"
        >
          <div>
            <el-checkbox 
              v-model="slectedAll" 
              @change="selectAll"
            > 
              全选
            </el-checkbox>
          </div>
          <div @click="AllCancelCollection">
            <img
              src="../../assets/img/un_focus.png"
              alt=""
            >
            取消收藏
          </div>
          <button
            class="OperationBtn"
            @click="Operation"
          >
            完成
          </button>
        </div>
      </div>
    </div>
    <!-- 关注店铺END -->

    <!-- 关注专题 -->
    <div v-if="activeIndex === 3">
      <div class="screening_box">
        <div class="screening_l" />
        
        <div
          v-if="opreateStatus === false"
          class="screening_r"
        >
          <button
            
            class="OperationBtn"
            @click="Operation"
          >
            批量操作
          </button>
        </div>

        <div
          v-if="opreateStatus === true"
          class="screening_r"
        >
          <div>
            <el-checkbox 
              v-model="slectedAll" 
              @change="selectAll"
            > 
              全选
            </el-checkbox>
          </div>
          <div @click="AllCancelCollection">
            <img
              src="../../assets/img/un_focus.png"
              alt=""
            >
            取消关注
          </div>
          <button
            class="OperationBtn"
            @click="Operation"
          >
            完成
          </button>
        </div>
      </div>
    </div>
    <!-- 关注专题END -->
  </div>
</template>

<script>
import unSelected from "../../assets/img/un_selected.png";
import selected from "../../assets/img/selected.png";
export default {
  data() {
    return {
      typeList: [
        {
          title: "关注的商品",
          id: 1,
        },
        {
          title: "关注的店铺",
          id: 2,
        },
        {
          title: "关注的专题",
          id: 3,
        },
      ],
      placeholder: '请输入商品名称',
      activeIndex: 1,
      isSelectedAll: false,
      slectedAll: false,
      opreateStatus: false,
      product: {},
      SearchInput: '', // 搜索
      classList: [], // 分类筛选
      tagList: [], // 标签筛选
      classListActive: '', // 分类筛选选择
      tagListActive: '', // 标签筛选
      unSelected: unSelected,
      selected: selected,
    };
  },
  mounted() {
    this.GetCollectData()
  },
  methods: {
    // 搜索
    Search(Search) {
      console.log('搜索', Search)
      this.SearchInput = Search
      this.$emit("SearchInput", this.SearchInput);
    },
    // 选择不同标签
    checkType(item) {
      this.activeIndex = item.id;
      this.isSelectedAll = false,
      this.slectedAll = false,
      this.opreateStatus = false,
      this.SearchInput = ''
      if(item.id === 1) {
        this.placeholder = '请输入商品名称'
      } else {
        this.placeholder = '请输入店铺名称'
      }
      console.log('checkType', item.id);
      this.$emit("selectType", item.id);
      this.$emit("SearchInput", this.SearchInput);
      this.ClassAll()
      this.TagAll()
      this.slectedAll = false;
    },
    //批量操作 按钮切换 并且设置蒙版
    Operation() {
      console.log('批量操作 按钮切换 并且设置蒙版')
      this.opreateStatus = !this.opreateStatus;
      this.isSelectedAll = !this.isSelectedAll;
      this.slectedAll = false,
      this.$emit("selectStatus", this.isSelectedAll);
    },
    // 是否全选  设置蒙版按钮样式
    selectAll(e) {
      this.slectedAll = e;
      this.$emit("selectStatusAll", e);
    },
    // 是否全选 
    selectStatus(e) {
      this.slectedAll = e;
    },
    // 全局刷新
    AllRefreshPage() {
      console.log('我进行了全局刷新')
      this.GetCollectData()
    },
    // 获取分类筛选和标签筛选
    GetCollectData() {
      let params = {
         token:localStorage.getItem("token"),
         data: {
          currentPage: 1,
          pagesize: 1000000,
          classId: "",
          productName: "",
          tagId: ""
         }
      }
      this.$api.person.getProductFavorites(params).then((res) => {
        console.log('获取分类筛选和标签筛选', res)
        this.classList = res.data.classList
        this.tagList = res.data.tagList
      })
    },
    // 分类筛选全部
    ClassAll() {
      this.classListActive = ''
      this.$emit("ClassAll", this.classListActive);
    },
    // 分类筛选
    ClassTabClick(ClassTabClick, index) {
      console.log('ClassTabClick', ClassTabClick)
      this.classListActive = index
      this.$emit("ClassTabClick", ClassTabClick.id);
    },
    // 标签筛选全部
    TagAll() {
      this.tagListActive = ''
      this.$emit("TagAll", this.tagListActive);
    },
    // 标签筛选
    TagTabClisck(TagTabClisck, index) {
      this.tagListActive = index
      this.$emit("TagTabClisck", TagTabClisck.id);
    },
    // 批量加入购物车
    AllAddCar() {
      this.$emit("AllAddCar");
    },
    // 批量取消
    AllCancelCollection() {
      this.$emit('AllCancelCollection')
    }
  },
};
</script>

<style scoped lang="scss">
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #999;
}

.BtnRight {
  justify-content: flex-end;
}

.BtnBetween {
  justify-content: space-between;
}

.toper {
  // height: 12.5rem;
  background: #fff;
  margin-bottom: 1.25rem;
  padding-bottom: 1.31rem;
  .titleBox {
    display: flex;
    flex-direction: row;
    padding: 2.75rem 2.63rem 0 2.63rem;
    align-items: center;

    .title {
      font-size: 1.13rem;
      color: #333;
    }

    .setting {
      font-size: 0.88rem;
      color: #999;
      display: flex;
      flex-direction: row;
      vertical-align: middle;
      align-items: center;

      img {
        margin-right: 0.56rem;
      }
    }
  }

  .msgType {
    margin: 1.31rem 1.75rem 0;
    border-bottom: 0.06rem solid #d8d8d8;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .menuList {
      display: flex;
      flex-direction: row;

      .menu {
        text-align: center;
        font-size: 1.13rem;
        width: 6.75rem;
        color: #666666;
        padding: 0.94rem 2.5rem;
        cursor: pointer;

        &:first-child {
          padding-left: 0;

          &.active {
            position: relative;
            color: #f0406f;

            &:after {
              content: "";
              position: absolute;
              left: 0;
              bottom: 0;
              width: 6.75rem;
              height: 0.31rem;
              background: rgba(240, 64, 111, 1);
            }
          }
        }

        &.active {
          position: relative;
          color: #f0406f;

          &:after {
            content: "";
            position: absolute;
            left: 2.5rem;
            bottom: 0;
            width: 6.75rem;
            height: 0.31rem;
            background: rgba(240, 64, 111, 1);
          }
        }
      }
    }

    .search {
      display: flex;
      flex-direction: row;

      input,
      button {
        border: 0.06rem solid #999;
        border-radius: 0.31rem;
        font-size: 0.88rem;
        outline: none;
        color: #999;
        background-color: #fff;

        &.input {
          width: 9.19rem;
          height: 1.44rem;
          margin-right: 0.88rem;
          text-indent: 0.56rem;
        }

        &.searchBtn {
          cursor: pointer;
          width: 2.88rem;
          height: 1.44rem;
        }
      }
    }
  }

  .screening_box{
    display: flex;
    justify-content: space-between;
    padding: 1.31rem 2.63rem  0;
    align-items: center;
    font-size: .88rem;
    .screening_l{
      display: flex;
      flex-direction: column;
      .screening_l_item{
        display: flex;
        height: 2rem;
        align-items: center;
        .screening_itme_box{
          display: flex;
          align-items: center;
          .screening_itme{
            padding: 0 .8rem;
            cursor:pointer;//鼠标变小手
          }
        }
      }
      .activeclass{
        color: #f0406f;
      }
    }
    .screening_r{
      display: flex;
      flex-direction: row;
      color: #999999;
      align-items: center;
      font-size: 0.88rem;

      > div {
        margin-right: 1rem;
        cursor: pointer;

        &.selected {
          color: #f0406f;
        }
      }
      .OperationBtn{
        border: 0.06rem solid #999;
        border-radius: 0.31rem;
        font-size: 0.88rem;
        outline: none;
        color: #999;
        background-color: #fff;
        cursor: pointer;
        width: 4.88rem;
        height: 1.44rem;
      }
    }
  }
}
</style>
<style>
 .el-checkbox__input.is-checked .el-checkbox__inner, 
 .el-checkbox__input.is-indeterminate .el-checkbox__inner{
   background-color: #f03f6e !important;
   border-color: #f03f6e !important;
 }
 .el-checkbox__input.is-checked+.el-checkbox__label{
   color: #999 !important;
 }
 .el-checkbox__inner:hover{
    border-color: #f03f6e !important;
 }
 .el-checkbox__input.is-focus .el-checkbox_inner {
    border-color: #f03f6e !important;
 }
</style>